<template>
    <div class="sidebar">
        <div class="box-container">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
            <template v-for="item in items" v-if='rights.indexOf(item.name)!=-1'>
                <template>
                    <el-menu-item :index="item.index">
                        <i :class="item.icon" style="margin-right:5px;"></i>{{ item.title }}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div> 
    </div>
</template>

<script>
    import MENU from  '../../service/auth';
    import * as Login from "../../service/login";
export default {
        data() {
            return {
                items:[],
                rights:'',
            }
        },
        computed:{
            onRoutes(){
                let path=this.$route.path
                this.items=MENU()
                for(let index in this.items){
                    // //console.log(this.items[index])
                    if(this.items[index].subs){
                        for(var i_sub in this.items[index].subs){
                            // //console.log(this.items[index].subs[i_sub])
                            if(path==this.items[index].subs[i_sub].index){
                                return  this.items[index].index
                            }
                        }
                    }
                }
                return ""
            }
        },
        mounted(){
            this.items=MENU();
            this.rights=Login.getLogin().rights+',首页';
            // //console.log(this.rights)
        }
    }
</script>

<style scoped>
    .sidebar{

        color:#fff;
        display: block;
        /* position: absolute; 
        width: 100%;
        left: 0;
        top: 70px;
        background: #fff;
        border-bottom:1px solid #ddd;
        */
    }
    .sidebar > ul {
        height:100%;
    }
    .sidebar li{
        float: left;
    }
</style>
